<template>
    <van-cell-group inset class="order-item">
		<van-cell class="shop-line">
			<template #title>
				<div class="flex" @click="to('/shop/home?shopId='+order.shopId)">
					<i class="iconfont mgr5 txt-unicom" v-if="shopTypeMap[order.shopType as keyof typeof shopTypeMap].indexOf('华盛')>=0">&#xe6ef;</i>
					<i class="iconfont mgr5 txt-unicom" v-else-if="shopTypeMap[order.shopType as keyof typeof shopTypeMap].indexOf('联通自营')>=0">&#xe720;</i>
					<i class="iconfont mgr5 txt-success" v-else>&#xe68c;</i>
					<label>{{order.shopName}}</label>
					<van-icon name="arrow" class="txt-disable"/>
				</div>
			</template>
			<span :class="statusColor">{{statusText}}</span>
		</van-cell>
		<div class="subs-wrap" @click="to('/order/orderDetail',{ordId:order.orderId})">
			<OrderSubItem v-for="sub in order.ordSubs" :key="sub.subId" :sub="sub"/>
		</div>
		<div class="van-cell flex-justify">
			<div><van-tag text-color="var(--white-color)" color="var(--nav-font-color)">{{orderFromMap[order.orderFrom as keyof typeof orderFromMap]}}单</van-tag></div>
			<div class="font-14">
				<span class="txt-gray" v-if="order.shippingMoney>0">含运费￥{{fen2Yuan2(order.shippingMoney)}}</span>
				<span class="txt-gray" v-else>免运费</span>
				<span class="mgl10 txt-primary">{{order.status==='01'?'待':'实'}}付款 ￥<span class="font-18">{{fen2Yuan2(order.realMoney)}}</span></span>
			</div>
		</div>
		<div class="van-cell btns-wrap">
			<template v-if="order.status==='01' && (order.orderFrom==='0'||order.orderFrom==='1')">
				<van-button round v-if="order.status==='01' && (order.orderFrom==='0'||order.orderFrom==='1')" size="small">取消订单</van-button>
				<van-button round  type="primary" plain size="small">&nbsp;&nbsp;去付款&nbsp;&nbsp;</van-button>
			</template>
			<van-button round v-else-if="order.status==='02'||order.status==='04'||order.status==='05'" size="small">联系客服</van-button>
			<van-button round type="primary" plain v-if="order.status==='05'" size="small">确认收货</van-button>
			<van-button round type="primary" plain size="small" v-else-if="order.status==='06'||order.status==='99'">再买一单</van-button>
		</div>
	</van-cell-group>
</template>
<style lang="scss" scoped>
.order-item{
	margin-top:10px; margin-bottom:10px;
	:deep(.van-cell){padding:10px}
	:deep(.van-cell__title){
		flex:4;
		.van-ellipsis{line-height:18px;height:18px;width:calc(100vw - 100px);}
	}
	:deep(.van-cell__value){flex-shrink: 0;}
	.shop-line{
		padding:8px 10px;
		.iconfont{margin-right:4px;}
		label{font-size:16px;margin-right:4px;}
	}
	.subs-wrap{ padding:0 10px; }
	.btns-wrap{
		justify-content: flex-end;
		.van-button{margin-left:12px;padding:0 10px;}
	}
}
</style>
<script lang="ts" setup>
import {OrderBaseItem} from "@/types";
import {fen2Yuan2} from "@/utils/validate";
//props
const props = defineProps<{
	order:OrderBaseItem
}>()
//data
const {shopTypeMap,ordStatusMap, orderFromMap} = useKV()

//computed
const statusColor=computed(()=>{
	switch(props.order.status){
		case '01':return 'txt-warning'
		case '06':return 'txt-success'
		case '02':
		case '04':
		case '05':return 'txt-primary'
		case '99':return 'txt-gray'
		default:return 'txt-danger'
	}
})
const statusText=computed(()=>{
	switch(props.order.status){
		case '04': return '部分发货'
		default: return ordStatusMap[props.order.status as keyof typeof ordStatusMap]
	}
})

//data
const {to} = useGoto()
</script>